<template>
<div class="atop1">
 <el-row>
  <el-col :span="18">
    <div class="grid-content bg-purple">
      <div class="conta-er">
<el-tabs type="border-card">
  <el-tab-pane label="发送文件" >
 <el-button @click="dialogVisible2=true">上传文件</el-button>
    <div v-for="item in LeaderFiles" :key="item.id" class="v2">
      <div class="file">
        <span class="introduction">文件介绍:&nbsp;&nbsp;{{item.introduction}}</span>
        <a :href="item.upload_file">点击下载</a>
      <!-- {{item.upload_file}} -->
             <el-popconfirm title="你确定要删除这条信息吗？" @confirm="handleDelete(item.id)">
          <template #reference>
        <a  class="deleteV" href="javascript:void(0);">删除</a>
          <span class="createtime">上传时间:&nbsp;&nbsp; {{ dayjs(item.create_time).format("YYYY-MM-DD / HH:mm:ss") }}</span>
          </template>
        </el-popconfirm>
      </div>
    </div>

  </el-tab-pane>
  <el-tab-pane label="接收文件"  >
    <div  style="padding:20px;">
        <el-button @click="dialogVisible=true">添加事务</el-button>
    </div>
    <el-tabs tab-position="left">
    <el-tab-pane :label="item.affairs_name"  v-for="item in affairsList" :key="item.id" >
        <refFile :Refdata="item"></refFile>
    </el-tab-pane>

  </el-tabs>

  </el-tab-pane>
</el-tabs>
<div class="bootom">
  <el-row type="flex" class="row-bg" justify="center">
         <el-col :span="6"><div class="grid-content bg-purple">
      <el-button type="success" round @click="goOff" >返回</el-button>
    </div></el-col>

</el-row>
</div>
</div>
    </div>
  </el-col>
  <el-col :span="5">
    <div class="grid-content bg-purple-light">
      <div class="legt-con">

         <div class="ton1">
        <div > <span class="qunid">群id:</span>  <span class="fonsz">{{id}}</span></div>
        <!-- <span></span> -->
        <div ><span class="qunleader">组长：</span>  <span class="fonsz">{{leader}}</span></div>
        </div>
        <div class="ton2">当前组员：</div>
    <div  v-for="item in groupData" :key="item.id" class="imgName">
    <img :src="item.avatar" class="imgAvator" />
    <span style="margin-left:5px;" class="nameText">{{item.username}}({{item.alias}})</span>
    </div>
    </div>
    </div>
    </el-col>
</el-row>

 <el-dialog  :visible.sync="dialogVisible"  title="添加事务" width="20%"    :modal-append-to-body='false'>
     <el-form  :model="formWork" label-width="80px"   ref="ruleGroupForm2"   :rules="rules2" >
       <el-form-item label="事务名称"  prop="affairsName">
         <el-input v-model="formWork.affairsName" ></el-input>
          </el-form-item>
     </el-form>
      <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">Cancel</el-button>
        <el-button type="primary" @click="addWork"
        >确定</el-button
        >
      </span>
      </template>
    </el-dialog>

      <el-dialog  :visible.sync="dialogVisible2"  title="添加文件" width="20%"    :modal-append-to-body='false'>
     <el-form  :model="formLeaderFile" label-width="80px"
        ref="ruleGroupForm"   :rules="rules">
       <el-form-item label="文件介绍" prop="introduction">
         <el-input v-model="formLeaderFile.introduction" ></el-input>
          </el-form-item>
           <el-form-item label="文件">
        <el-upload ref="upload" action="http://localhost:2001/files/upload" :on-success="filesUploadSuccess" >
            <el-button  type="primary">点击上传</el-button>
            </el-upload>
       </el-form-item>

     </el-form>
      <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible2 = false">Cancel</el-button>
        <el-button type="primary" @click="addFilesWork"
        >确定</el-button
        >
      </span>
      </template>
    </el-dialog>

</div>
</template>

<script>
import refFile from './RefGroup.vue'
import { getGroupLeader, getInfo } from '@/api/newGroup'
import { getAffairsList, addAffairs, getLeaderFiles, addLeaderFiles, deleteAffair } from '@/api/affairs'
export default {
  props: ['id'],
  data () {
    return {
      groupData: '',
      LeaderFiles: '',

      leader: '',
      dialogVisible: false,
      dialogVisible2: false,
      formWork: {
        affairsName: ''
      },
      formLeaderFile: {},
      affairsList: '',
      affairs_name: '21444',
      affid: '',
      rules: {
        introduction: [
          { required: true, message: '请输入文件介绍', trigger: 'blur' },
          {
            min: 5,
            max: 15,
            message: '长度在 5 到 30 个字符',
            trigger: 'blur'
          }
        ]
      },
      rules2: {
        affairsName: [
          { required: true, message: '请输入事务名称', trigger: 'blur' },
          {
            min: 5,
            max: 15,
            message: '长度在 5 到 30 个字符',
            trigger: 'blur'
          }
        ]
      }

    }
  },
  methods: {
    fetchTodayTip () {
      getInfo(this.id).then(response => {
        const { data } = response
        this.groupData = data
        console.log(this.groupData)
      })
      getLeaderFiles(this.id).then(response => {
        const { data } = response
        this.LeaderFiles = data
        console.log(this.LeaderFiles)
      })
      getGroupLeader(this.id).then(response => {
        const { data } = response
        this.leader = data.groupLeader
      })
      getAffairsList(this.id).then(response => {
        const { data } = response
        this.affairsList = data
        console.log(this.affairsList)
        // this.fetchTodayTip()
      })
    },
    // GetAffairsMenu(){}
    goOff () {
      this.$router.go(-1)
    },
    addWork () {
      this.$refs.ruleGroupForm2.validate((valid) => {
        if (valid) {
          console.log(this.formWork)
          // this.formWork.createTime = 11111111
          try {
            addAffairs(this.formWork).then(res =>
              this.$message.success('添加成功')
            )
          } catch (e) {
            this.$buefy.toast.open({
              message: `创建失败. ${e}`,
              type: 'is-danger'
            })
          }
          this.fetchTodayTip()
          // window.location.reload()
        } else {
          return false
        }
      })
    },
    addFilesWork () {
      this.$refs.ruleGroupForm.validate((valid) => {
        if (valid) {
          // console.log(this.formWork)
          // this.formWork.createTime = 11111111
          this.formLeaderFile.createTime = new Date()
          try {
            addLeaderFiles(this.formLeaderFile).then(res =>
              this.$message.success('添加成功'),
            this.dialogVisible2 = false,
            this.formLeaderFile = {},
            this.$refs.upload.clearFiles()
            )
          } catch (e) {
            this.$buefy.toast.open({
              message: `创建失败. ${e}`,
              type: 'is-danger'
            })
          }
          this.fetchTodayTip()
          // window.location.reload()
        } else {
          return false
        }
      })
    },
    filesUploadSuccess (res) {
      console.log(res)
      this.formLeaderFile.groupId = this.id
      this.formLeaderFile.uploadFile = res.data
    },
    handleDelete (id) {
      try {
        deleteAffair(id).then(value => {
          this.$message.success('删除成功')
          this.fetchTodayTip()
        })
      } catch (e) {
        this.$message.error('删除失败')
      }
    }
  },
  created () {
    this.fetchTodayTip()
    // this.GetAffairsMenu()
    this.formWork.groupId = this.id
  },
  components: {
    refFile
  },
  mounted () {
  }
}
</script>

<style lang="less" scoped>
.qunid ,.qunleader{
  display: inline-block;
  width: 60px;
  height: 30px;
  border-radius: 30px;
  line-height: 30px;
  // justify-content: center;
  // align-items: center;
  // margin: 0 auto;
  text-align: center;
  background-color: rgba(0, 0, 0, 0.329);
  margin-bottom: 4px;
  font-weight: 550;
  font-family: Sans-serif;
  color: #fff;
}

.fonsz{
  font-weight: 550;
  color: #fff;
  text-decoration: underline;
}
.conta-er{
  height: 63vh;
}
.legt-con{
  margin-left: 15px;
  background-color: rgb(165, 174, 179);
  height: 75vh;
  color: black;
   overflow:auto;
}
.el-tabs{
  height: 100%;
  overflow:auto;
  position: relative;
  // background-color: white;
}
.el-tab-pane{
  // width: 50%;
  color: black;
}
.bootom{
  margin-top: 20px;
  height: 60px;
  background-color: #fff;
  align-items: center;
  line-height: 60px;
  justify-content: center;
}
.el-card{
  background-color: #fff;
  border: none;
  margin-left: 10px;
  .box-card {
.el-card__body {
    padding: 0px;
}
// .el-tabs__item {
//   width: 5.333333rem !important;
// }
  }
}
.ton1{
 padding-top: 5px;
 padding-left: 10px;
 background-color: rgb(165, 174, 179);
  // border-bottom: 2px solid #000;
}
.ton2{
  height: 30px;
  background-color: rgb(205, 231, 221);
  line-height: 30px;
  text-align: center;
}
.demo-type{
  display: flex;
  align-items: center;
  margin: 8px;
}
// .nameText{
//   overflow: hidden;
// }
.file{
  padding-left: 20px;
  height: 40px;
  line-height: 40px;
  background-color: rgb(80, 102, 201);
  border-radius: 40px;
  a{
    color: white;
  }
  .deleteV{
    font-size: 5px;
    padding-left: 20px;
  color: red;
  }

}
  .file:hover{
    background-color: rgb(32, 221, 196);
  }
.v2{
  // display: inline-block;
  margin: .533333rem;
}
.introduction{
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 500;
  font-size: 16px;
  margin-right: 10px;
}
.createtime{
    font-family: Arial, Helvetica, sans-serif;
  font-weight: 400;
  font-size: 12px;
   margin-left: 40px;
}
.imgName{
   white-space:nowrap;
   overflow: hidden;
   text-overflow:ellipsis;
   padding: 10px;
   padding-bottom: 3px;
}
.imgAvator{
  width: 30px;
  height: 30px;
  border-radius: 30px;
}
</style>
